<template>
  <div class="classify-review">
    <nav-bar></nav-bar>
    <div class="page-main clearfix">
      <div class="page-left">
        <div class="xyd-container">
          <div class="xyd-c-title">资源目录</div>
          <div class="xyd-c-content">
            <ul>
              <li>练习目录</li>
            </ul>
          </div>
        </div>
        <!-- <adv></adv> -->
      </div>
      <div class="page-right">
        <div class="xyd-container">
          <div class="xyd-c-title clearfix">
            <span style="float:left;">在线练习</span>
            <button class="yellow-btn" @click="goPublish">发布练习</button>
          </div>
          <div class="xyd-c-content" v-loading.body="loading">
            <no-content v-if="!loading && (!paper || paper.length === 0)" ></no-content>
            <ul v-if="paper && paper.length !== 0">
              <li v-for="item,i in paper" :key="i">
                <paper-item :value="item"></paper-item>
              </li>
            </ul>
            <div class="pagination-container">
              <el-pagination
                v-if="paper && paper.length !== 0"
                :page-size="offset"
                layout="prev, pager, next"
                :total="total"
                @current-change="handlePageChange"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { NavBar } from 'views/layout'
import Adv from 'views/components/adv'
import { NoContent } from 'components/Sit'
import PaperItem from './paperItem'
import { getPapers } from 'api/resource'

export default {
  name: 'Practise',
  components: {
    NavBar,
    Adv,
    PaperItem,
    NoContent
  },
  data() {
    return {
      radio3: '全部',
      paper: [],
      total: 0,
      page: 1,
      offset: 10
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.loading = true
      getPapers()
      .then(res => {
        this.loading = false
        this.paper = res.data.paper
        this.total = res.data.page.last_page * this.offset
      })
      .catch(err => {
        this.loading = false
        console.log(err)
      })
    },
    goPublish() {
      this.$router.push('/upload-practise1')
    },
    // 分页
    handlePageChange(page) {
      this.page = page
      this.fetchData()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.classify-review{
  .page-main{
    .page-left{
      .xyd-container{
        .xyd-c-content{
          >ul{
            padding: 15px;
            >li{
              margin: 0 auto;
            }
          }
        }
      }
    }
    .page-right{
      .xyd-container{
        .xyd-c-title{
          position: relative;
          padding-left: 15px;
          .yellow-btn{
            position: absolute;
            width: 180px;
            right: 15px;
            top: 5px;
          }
        }
        .xyd-c-content{
          padding: 0 40px;
          min-height: 350px;
        }
      }
    }
  }
}
</style>